<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>实验2测试</title>

	</head>
	<body>
		
		<script src="js/pixi.min.js"></script>
		<script>
		var  app = new PIXI.Application(906	,1610);
		document.body.appendChild(app.view);
		
		var flag_bg=0;
		var bg = new PIXI.Sprite.fromImage("res/bg1.png");
		app.stage.addChild(bg);
		bg.interactive = true;
		bg.on("click",tips)
		
		
		var wenwu_1 =  new PIXI.Sprite.fromImage("res/wenwu_1.png");
		wenwu_1.anchor.set(0.5,0.5);
		wenwu_1.scale.set(0.45,0.45);
		wenwu_1.x=476;
		wenwu_1.y=750;
		app.stage.addChild(wenwu_1)
		
		
		var stock =  new PIXI.Sprite.fromImage("res/stock.png");
		stock.scale.set(0.75,0.75);
		stock.anchor.set(0.5,0.5);
		stock.x=570;
		stock.y=730;
		app.stage.addChild(stock);
		
		var bg_temp =  new PIXI.Sprite.fromImage("res/bg_temp.png");
		bg_temp.alpha=0;
		app.stage.addChild(bg_temp);
		
		
		var black = new PIXI.Sprite.fromImage("res/black.png");
		black.alpha=0;
		app.stage.addChild(black);
		
		var info_1 = new PIXI.Sprite.fromImage("res/info_1.png");
		info_1.x=100;
		info_1.y=100;
		info_1.alpha=1;
		
		var info_2 = new PIXI.Sprite.fromImage("res/info_2.png");
		info_2.x=100;
		info_2.y=100;
		info_2.alpha=0;
		
		
		
		
		var X = new PIXI.Sprite.fromImage("res/X.png");
		X.scale.set(0.7,0.7);
		X.x=720;
		X.y=130;
		X.interactive=true;
		X.on("click",display_1_off);
		
		var save = new PIXI.Sprite.fromImage("res/save.png");
		save.scale.set(0.7,0.7);
		save.x=155;
		save.y=130;
		
		var button_1_on = new PIXI.Sprite.fromImage("res/button_1_on.png")
		button_1_on.scale.set(0.4,0.4);
		button_1_on.anchor.set(0.5,0.5);
		button_1_on.x=300;
		button_1_on.y=1380;
		button_1_on.interactive=true;
		button_1_on.on("click",display_info_1)
		
		var button_1_off = new PIXI.Sprite.fromImage("res/button_1_off.png")
		button_1_off.scale.set(0.4,0.4);
		button_1_off.anchor.set(0.5,0.5);
		button_1_off.x=300;
		button_1_off.y=1380;
		
		var button_2_on = new PIXI.Sprite.fromImage("res/button_2_on.png")
		button_2_on.scale.set(0.4,0.4);
		button_2_on.anchor.set(0.5,0.5);
		button_2_on.x=665;
		button_2_on.y=1380;
		button_2_on.interactive=true;
		button_2_on.on("click",display_info_2)
		
		var button_2_off = new PIXI.Sprite.fromImage("res/button_2_off.png")
		button_2_off.scale.set(0.4,0.4);
		button_2_off.anchor.set(0.5,0.5);
		button_2_off.x=665;
		button_2_off.y=1380;
		

		
		
		
		var flag_1=0; 
		var flag_2=2;
		
		app.ticker.add(animate);
		
		function animate(){
			if(flag_2<2){
				flag_1++;
			}
			if(flag_1%3==0&&flag_2==0){
				black.alpha+=0.02;
			}
			if(flag_2==0&&black.alpha>=1){
				flag_2=1;
			}
			if(flag_2==1&&flag_1%3==0){
				black.alpha-=0.02;
			}
			if(flag_2==1&&black.alpha<=0.6){
				flag_2++;
				bg.visible=false;
				app.stage.removeChild(black);
				bg_temp.alpha=1;
			}
			
		}
		
		function tips(){
			
			if(flag_bg==0){
				flag_2=0;
				flag_bg++;
				wenwu_1.interactive=true;
				wenwu_1.on("click",display_1);
				
				

			}
			
		}
		
		
		function display_1(){
			app.stage.addChild(info_1);
			app.stage.addChild(info_2);
			app.stage.addChild(X);
			app.stage.addChild(save);
			app.stage.addChild(button_1_off);
			app.stage.addChild(button_1_on);
			app.stage.addChild(button_2_off);
			app.stage.addChild(button_2_on);
			display_info_1();
		}
		
		
		function display_1_off(){
			app.stage.removeChild(info_1);
			app.stage.removeChild(info_2);
			app.stage.removeChild(X);
			app.stage.removeChild(save);
			app.stage.removeChild(button_1_off);
			app.stage.removeChild(button_1_on);
			app.stage.removeChild(button_2_off);
			app.stage.removeChild(button_2_on);
			
			var bg_new = new PIXI.Sprite.fromImage("res/bg.png");
			app.stage.addChild(bg_new);

		}
		
		function display_info_1(){
			button_1_on.alpha=1;
			button_2_on.alpha=0;
			info_2.alpha=0;
			info_1.alpha=1;
		}
		
		function display_info_2(){
			button_1_on.alpha=0;
			button_2_on.alpha=1;
			info_2.alpha=1;
			info_1.alpha=0;
		}
		
		
		
		
		
		</script>
		
		
	</body>
</html>